<template>
  <view class="container">
    <view class="block">
      <view class="block-title">
        收款备注
      </view>
      <textarea class="block-ipt" placeholder-class="styles" v-model="remark" placeholder="添加收款备注，可在收款明细中透出（20字以内）">
      </textarea>
    </view>
    <view class="selUser">
      <view class="selUser-label">
        收款员工
      </view>
      <view class="selUser-fr" @click="open">
        <view class="selUser-fr-value">
          {{value}}
        </view>
        <image class="arrow_icon" src="../../static/images/arrow.png" mode=""></image>
      </view>
    </view>
    <view class="setqrcode" @click="save">
      生成收款码
    </view>
    <uv-picker ref="picker" :columns="columns" @confirm="confirm">
    </uv-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          [
            "老板",
            "员工"
          ]
        ],
        value: "",
        remark: ""
      }
    },
    methods: {
      open() {
        this.$refs.picker.open();
      },
      confirm(e) {
        console.log('选择身份：', e);
        this.value = e.value[0];
      },
      save() {
        uni.$emit("setUserLabel", this.remark);
        uni.navigateBack();
      }
    }
  }
</script>
<style>
  .styles {
    font-weight: 400;
    font-size: 24rpx;
    color: #AAAAAA;
  }
</style>
<style lang="scss" scoped>
  .container {
    padding: 30rpx;
    box-sizing: border-box;

    .setqrcode {
      width: 100%;
      height: 88rpx;
      background: linear-gradient(270deg, #FF3C21 0%, #EA7222 100%);
      box-shadow: 0rpx 16rpx 20rpx 0rpx rgba(244, 88, 33, 0.2);
      border-radius: 48rpx;
      text-align: center;
      line-height: 88rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      margin-top: 120rpx;
    }

    .selUser {
      display: flex;
      justify-content: space-between;
      height: 104rpx;
      align-items: center;
      border-radius: 30rpx;
      background: #fff;
      margin-top: 30rpx;
      padding: 0 40rpx;
      box-sizing: border-box;

      .selUser-label {
        font-weight: 400;
        font-size: 32rpx;
        color: #333333;
      }

      .selUser-fr {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: flex-end;

        .selUser-fr-value {
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }

        .arrow_icon {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }

    .block {
      background: #fff;
      border-radius: 30rpx;
      padding: 30rpx;
      box-sizing: border-box;

      .block-title {
        font-weight: bold;
        font-size: 28rpx;
        color: #333333;
      }

      .block-ipt {
        width: 100%;
        height: 178rpx;
        background: #FAFAFA;
        border-radius: 30rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #222;
        padding: 24rpx;
        box-sizing: border-box;
        margin-top: 22rpx;
      }
    }
  }
</style>